<template>

	<view class="uni-tab-bar my_order">
		<!-- #ifdef APP-PLUS -->
		<top-set backgroundColor="#3595f9"></top-set>
		<tab-top imgSrc="/static/icon/white-back.png" fixed="true" bgColor="#3595f9" color="#FFFFFF" title="我的订单"></tab-top>
		<!-- #endif -->
		<view id="tab-bar" class=" order_head">
			<view v-for="(tab,index) in tabBars" :key="tab.id" class="swiper-tab-list" :class="tabIndex==index ? 'list_active' : ''"
			 :id="tab.id" :data-current="index" @click="tapTab">
				{{tab.name}}
			</view>
		</view>
		<view class="line"></view>
		<swiper :current="tabIndex" class="swiper-box" :duration="300" @change="changeTab">

			<swiper-item v-for="(tab,index1) in newsitems" :key="index1">
				<scroll-view class="list" scroll-y @scrolltolower="loadMore(index1)" v-if="haveList[index1] == '1'">

					<block v-for="(newsitem,index2) in tab" :key="index2">
						<media-list :options="newsitem" @close="close(index1,index2,newsitem.osid)" @click="goDetail(newsitem)"></media-list>
					</block>
					<view class="uni-tab-bar-loading">
						{{loadText}}
					</view>
				</scroll-view>
				<view v-if="haveList[index1] == '-1'" class="show">
					<view class="show_null">
						<image src="/static/bg/null.png" mode=""></image>
					</view>
					<view class="title">暂无订单哦！</view>
				</view>
				<view v-if="haveList[index1] == '0'" style="width: 100%;height: 30vh;" class="show">
					<image style="position:absolute;left: 0;right: 0;bottom: 0;margin: 0 auto; width:80upx;height: 80upx;" class="load_img"
					 src="/static/icon/loading.png" mode=""></image>
				</view>
			</swiper-item>
		</swiper>
		<layer v-if="layerShow">
			<view slot="text1">
				提示
			</view>
			<view slot="text2">
				{{layerTitle}}
			</view>
			<view slot="btn1" @tap="layerClose">否</view>
			<view slot="btn2" @tap="layerFinish">是</view>
		</layer>
	</view>
</template>
<script>
	let page = 1,
		
		page0 = {
			page:1,
			flag:false
		},
		page1 = {
			page:1,
			flag:false
		},
		page2 = {
			page:1,
			flag:false
		},
		
		index2;
	import mediaList from '@/components/cleaner/order/order-item.vue';
	import layer from "@/components/layer/layer.vue";
	export default {
		components: {
			mediaList,
			layer
		},
		data() {
			return {
				layerShow: false,
				layerTitle: "是否删除本条订单？",
				scrollLeft: 0,
				isClickChange: false,
				tabIndex: 0,
				newsitems: [
					[],
					[],
					[]
				],
				loadText: '',
				tabBars: [{
					name: '全部',
					id: 'all'
				}, {
					name: '待确认',
					id: 'confirmed'
				}, {
					name: '已完成',
					id: 'complete'
				}],
				haveList: ['0', '0', '0']
			}
		},
		onLoad(e) {
			index2 = e.type * 1;
		},
		onShow() {
			page = 1;
			page0 = {
				page:1,
				flag:false
			};
			page1 = {
				page:1,
				flag:false
			};
			page2 = {
				page:1,
				flag:false
			};
			index2;
			this.tapTab(index2);
			this.randomfn();
		},
		mountend() {

		},
		methods: {
			goDetail(e) {
				uni.navigateTo({
					url: '/pages/template/tabbar/detail/detail?title=' + e.title
				});
			},
			getOrderData(orderState) {
				return new Promise((res) => {
					this.req({
						method: 'get',
						url: 'both/Order',
						data: {
							limit: 10,
							page: page,
							position: this.isLogin().type,
							cid: this.isLogin().id,
							// cid:'D3FC71F0_0D09_45C9_AA4C_3CE1D5A3',
							order_state: orderState
						}
					}, (data) => {

						res(data);


					}, (data) => {
						res(data);
					});
				});

			},
			close(index1, index2, id) {
				this.openClose(async () => {

					let res = await this.detelData(id);
					if (res.data.status == 1) {
						this.newsitems[index1].splice(index2, 1);
						uni.showLoading();
						this.randomfn();
						uni.hideLoading();
						uni.showToast({
							icon: 'none',
							title: '删除成功'
						});
					} else {
						uni.showToast({
							icon: 'none',
							title: '请稍后重试'
						});
					}

				});


			},
			/**
			 * 删除数据
			 */
			detelData(id) {
				return new Promise((res) => {
					this.req({
						url: 'both/delOrderStatus',
						method: 'get',
						data: {
							id: id,
							cid: this.isLogin().id
						}
					}, (data) => {
						res(data)
					})
				})
			},
			async loadMore(e) {
				console.log(e);
				let res;
				
				switch (e) {
					case 0:
						
						console.log(page0.flag);
						if(!page0.flag){
							this.loadText = '加载中...';
							page0.page++;
							page = page0.page;
							res = await this.getOrderData('');
							if (res.data.status == 1) {
								this.newsitems[e] = this.newsitems[e].concat(res.data.data.data);
								if(res.data.data.data.length <10 )page0.flag = true;
								
								this.loadText = '';
							} else {
								page0.flag = true;
								this.loadText = '没有更多了';
							}
						}
						

						break;
					case 1:
						if(!page1.flag){
							this.loadText = '加载中...';
							page1.page++;
							page = page1.page;
							res = await this.getOrderData('30');
							if (res.data.status == 1) {
								this.newsitems[e] = this.newsitems[e].concat(res.data.data.data);
								if(res.data.data.data.length <10 )page1.flag = true;
								this.loadText = '';
							} else {
								page1.flag = true;
								this.loadText = '没有更多了';
							}
						}
						
						break;
					case 2:
						if(!page2.flag){
							this.loadText = '加载中...';
							page2.page++;
							page = page2.page;
							res = await this.getOrderData('40');
							if (res.data.status == 1) {
								this.newsitems[e] = this.newsitems[e].concat(res.data.data.data);
								if(res.data.data.data.length <10 )page2.flag = true;
								this.loadText = '';
							} else {
								page2.flag = true;
								this.loadText = '没有更多了';
							}
						}
						
						break;
					default:
						break;
				}

				// setTimeout(() => {
				// 	this.addData(e);
				// }, 1200);
			},
			addData(e) {

				return;
				if (this.newsitems[e].length > 30) {
					this.loadText = '没有更多了';
					return;
				}
				for (let i = 1; i <= 10; i++) {
					this.newsitems[e].push({});
				}
			},
			async changeTab(e) {
				let index = e.target.current;
				index2 = index;
				if (this.newsitems[index].length === 0) {
					this.addData(index)
				}
				if (this.isClickChange) {
					this.tabIndex = index;
					this.isClickChange = false;
					return;
				}
				let tabBar = await this.getElSize("tab-bar"),
					tabBarScrollLeft = tabBar.scrollLeft;
				let width = 0;

				for (let i = 0; i < index; i++) {
					let result = await this.getElSize(this.tabBars[i].id);
					width += result.width;
				}
				let winWidth = uni.getSystemInfoSync().windowWidth,
					nowElement = await this.getElSize(this.tabBars[index].id),
					nowWidth = nowElement.width;
				if (width + nowWidth - tabBarScrollLeft > winWidth) {
					this.scrollLeft = width + nowWidth - winWidth;
				}
				if (width < tabBarScrollLeft) {
					this.scrollLeft = width;
				}
				this.isClickChange = false;
				this.tabIndex = index; //一旦访问data就会出问题


			},
			getElSize(id) { //得到元素的size
				return new Promise((res, rej) => {
					uni.createSelectorQuery().select("#" + id).fields({
						size: true,
						scrollOffset: true
					}, (data) => {
						res(data);
					}).exec();
				})
			},
			async tapTab(e) { //点击tab-bar
				let tabIndex = e.target ? e.target.dataset.current : e;
				this.tabIndex = tabIndex;
				index2 = tabIndex;
				console.log(tabIndex);
				// 				let tpl1;
				// 
				// 				switch (tabIndex){
				// 					case 0:
				// 					tpl1 = await this.getOrderData('');
				// 						break;
				// 					case 1:
				// 					tpl1 = await this.getOrderData('30');
				// 					
				// 						break;
				// 					case 2:
				// 					tpl1 = await this.getOrderData('40');
				// 						break;
				// 					default:
				// 						break;
				// 				}
				// 
				// 				this.newsitems[tabIndex] = tpl1.data.data.data ? tpl1.data.data.data : '';
				if (this.newsitems[tabIndex] && this.newsitems[tabIndex].length === 0) {
					this.addData(tabIndex)
				}
				if (this.tabIndex === tabIndex) {
					return false;
				} else {
					let tabBar = await this.getElSize("tab-bar"),
						tabBarScrollLeft = tabBar.scrollLeft; //点击的时候记录并设置scrollLeft
					this.scrollLeft = tabBarScrollLeft;
					this.isClickChange = true;
					this.tabIndex = tabIndex;
				}
			},
			async randomfn() {


				let ary = [];
				let tpl1 = await this.getOrderData('');
				let tpl2 = await this.getOrderData('30');
				let tpl3 = await this.getOrderData('40');

				if (tpl1.data.status == 1) {
					ary.push(tpl1.data.data.data)
					this.haveList[0] = '1';
					// tpl1.data.data.data.have = true;
				} else {
					ary.push([])
					this.haveList[0] = '-1';
					// tpl1.data.data.data.have = false;
				}


				if (tpl2.data.status == 1) {
					ary.push(tpl2.data.data.data)
					this.haveList[1] = '1';
					// tpl2.data.data.data.have = true;
				} else {
					ary.push([])
					this.haveList[1] = '-1';
					// tpl2.data.data.data.have = false;
				}

				if (tpl3.data.status == 1) {
					this.haveList[2] = '1';
					ary.push(tpl3.data.data.data);
				} else {
					ary.push([])
					this.haveList[2] = '-1';
				}

				// for (let i = 0, length = this.tabBars.length; i < length; i++) {
				// 	let aryItem = {
				// 		loadingText: '加载更多...',
				// 		data: []
				// 	};
				// 	if (i < 1) {
				// 		for (let j = 1; j <= 10; j++) {
				// 			aryItem.data.push(tpl['data' + Math.floor(Math.random() * 5)]);
				// 		}
				// 	}
				// 	ary.push(aryItem);
				// }
				this.newsitems = ary;

			},
			/**
			 * 过滤数据为页面可用格式
			 */
			dataFilterList(arr) {
				let newArr = [];

				for (let i = 0; i < arr.length; i++) {
					for (let j = 0; j < arr[i].orderData.length; j++) {
						newArr.push(arr[i].orderData[j]);
					}
				}

				return newArr;
			},
			/**
			 * 页面滑动事件
			 */


			/**
			 * 蒙层返回完成
			 */
			layerFinish() {


			},
			/**
			 * 关闭蒙层
			 */
			layerClose() {
				this.layerShow = false;
			},
			/**
			 * 打开蒙层
			 */
			openClose(callback) {
				this.layerShow = true;
				this.layerFinish = () => {
					this.layerClose();
					callback();
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	$c:#3595f9;

	.load_img {
		-webkit-animation: myfirst 1.5s linear infinite;
	}

	@keyframes myfirst {
		from {
			transform: rotate(0deg)
		}

		to {
			transform: rotate(360deg)
		}
	}

	.uni-tab-bar-loading {
		text-align: center;
		font-size: 28upx;
		color: #999;
	}

	.my_order>.order_head {
		height: 82upx;
		width: 100%;
		box-sizing: border-box;
		font-size: 32upx;
		// border-bottom: 20upx solid #e5e5e5;



		.swiper-tab-list {
			float: left;
			height: 100%;
			color: #999999;
			line-height: 82upx;
			width: 33.333333%;
			text-align: center;
		}

		.list_active {
			color: $c;
			position: relative;
		}

		.list_active:after {
			position: absolute;
			content: '';
			width: 60upx;
			height: 6upx;
			background: $c;
			left: 0;
			right: 0;
			bottom: 0;
			margin: 0 auto;
		}


	}

	.my_order>.swiper-box {
		/* #ifdef APP-PLUS */
		height: calc(100vh - var(--status-bar-height) - 168upx);
		/* #endif */
		/* #ifndef APP-PLUS */
		height: calc(100vh - 82upx);
		/* #endif */
		background: white;

		.list {
			width: 100%;
			height: 100%;
			background: #F8F8F8;
		}

		.show {
			position: relative;

			.show_null {
				margin-top: 190upx;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 345upx;
					height: 310upx;
				}
			}

			.title {
				position: absolute;
				width: 100%;
				top: 220upx;
				left: 0;
				text-align: center;
				font-size: 32upx;
			}
		}
	}
</style>
